<template>
  <div class="todos-container">
    <el-card>
      <div class="header">
        <h2>待办事项</h2>
        <div class="actions">
          <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新建待办</el-button>
          <el-button icon="el-icon-refresh" @click="refreshList">刷新</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="mt-20">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="未完成" name="active"></el-tab-pane>
        <el-tab-pane label="已完成" name="completed"></el-tab-pane>
      </el-tabs>

      <div class="filter-controls">
        <el-input
            v-model="filter.keyword"
            placeholder="搜索待办事项"
            clearable
            style="width: 250px; margin-right: 15px;"
        />
        <el-select
            v-model="filter.priority"
            placeholder="优先级"
            clearable
            style="width: 120px; margin-right: 15px;"
        >
          <el-option label="高" value="high" />
          <el-option label="中" value="medium" />
          <el-option label="低" value="low" />
        </el-select>
        <el-date-picker
            v-model="filter.dueDate"
            type="date"
            placeholder="截止日期"
            value-format="yyyy-MM-dd"
            style="width: 180px; margin-right: 15px;"
        />
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>

      <el-table :data="filteredTodos" style="width: 100%" height="600">
        <el-table-column width="50">
          <template #default="scope">
            <el-checkbox v-model="scope.row.completed" @change="toggleComplete(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="待办事项">
          <template #default="scope">
            <div :class="{ 'completed-task': scope.row.completed }">
              {{ scope.row.title }}
              <el-tag v-if="scope.row.priority === 'high'" size="small" type="danger">高优先级</el-tag>
              <el-tag v-else-if="scope.row.priority === 'medium'" size="small" type="warning">中优先级</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dueDate" label="截止日期" width="120" />
        <el-table-column prop="category" label="分类" width="120" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="editTodo(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteTodo(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="totalTodos"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑待办对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="40%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="标题" required>
          <el-input v-model="form.title" placeholder="输入待办事项标题" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="输入详细描述" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="截止日期">
              <el-date-picker
                  v-model="form.dueDate"
                  type="date"
                  placeholder="选择截止日期"
                  value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级">
              <el-select v-model="form.priority" placeholder="选择优先级">
                <el-option label="高" value="high" />
                <el-option label="中" value="medium" />
                <el-option label="低" value="low" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="分类">
          <el-select v-model="form.category" placeholder="选择分类">
            <el-option label="工作" value="work" />
            <el-option label="个人" value="personal" />
            <el-option label="学习" value="study" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTodo">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Todos',
  setup() {
    const activeTab = ref('all')
    const dialogVisible = ref(false)
    const dialogTitle = ref('新建待办事项')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const totalTodos = ref(15)

    const filter = reactive({
      keyword: '',
      priority: '',
      dueDate: ''
    })

    const todos = ref([
      {
        id: 1,
        title: '审批待处理的离职申请',
        description: '张三、李四的离职申请需要审批',
        dueDate: '2023-05-25',
        priority: 'high',
        category: '工作',
        completed: false
      },
      {
        id: 2,
        title: '准备部门月度会议材料',
        description: '整理上个月的工作总结和下个月的计划',
        dueDate: '2023-05-28',
        priority: 'medium',
        category: '工作',
        completed: false
      },
      {
        id: 3,
        title: '完成系统权限设置文档',
        description: '为新员工准备系统权限设置指南',
        dueDate: '2023-06-01',
        priority: 'medium',
        category: '工作',
        completed: true
      },
      {
        id: 4,
        title: '购买办公用品',
        description: '打印纸、笔、笔记本等',
        dueDate: '2023-05-30',
        priority: 'low',
        category: '工作',
        completed: false
      }
    ])

    const form = reactive({
      id: null,
      title: '',
      description: '',
      dueDate: '',
      priority: 'medium',
      category: 'work',
      completed: false
    })

    const filteredTodos = computed(() => {
      return todos.value.filter(todo => {
        // 根据活动标签筛选
        if (activeTab.value === 'active' && todo.completed) return false
        if (activeTab.value === 'completed' && !todo.completed) return false

        // 根据关键词筛选
        const matchesKeyword = filter.keyword ?
            todo.title.includes(filter.keyword) ||
            (todo.description && todo.description.includes(filter.keyword)) : true

        // 根据优先级筛选
        const matchesPriority = filter.priority ?
            todo.priority === filter.priority : true

        // 根据截止日期筛选
        const matchesDueDate = filter.dueDate ?
            todo.dueDate === filter.dueDate : true

        return matchesKeyword && matchesPriority && matchesDueDate
      })
    })

    const showAddDialog = () => {
      dialogTitle.value = '新建待办事项'
      Object.assign(form, {
        id: null,
        title: '',
        description: '',
        dueDate: '',
        priority: 'medium',
        category: 'work',
        completed: false
      })
      dialogVisible.value = true
    }

    const editTodo = (todo) => {
      dialogTitle.value = '编辑待办事项'
      Object.assign(form, { ...todo })
      dialogVisible.value = true
    }

    const saveTodo = () => {
      if (!form.title) {
        ElMessage.error('请填写标题')
        return
      }

      if (form.id) {
        // 更新现有待办
        const index = todos.value.findIndex(t => t.id === form.id)
        if (index !== -1) {
          todos.value[index] = { ...form }
        }
        ElMessage.success('待办事项已更新')
      } else {
        // 添加新待办
        const newId = Math.max(...todos.value.map(t => t.id), 0) + 1
        todos.value.push({
          id: newId,
          title: form.title,
          description: form.description,
          dueDate: form.dueDate,
          priority: form.priority,
          category: form.category,
          completed: false
        })
        ElMessage.success('待办事项已添加')
      }
      dialogVisible.value = false
    }

    const deleteTodo = (todo) => {
      const index = todos.value.findIndex(t => t.id === todo.id)
      if (index !== -1) {
        todos.value.splice(index, 1)
        ElMessage.success('待办事项已删除')
      }
    }

    const toggleComplete = (todo) => {
      const status = todo.completed ? '已完成' : '标记为未完成'
      ElMessage.success(`"${todo.title}" ${status}`)
    }

    const search = () => {
      currentPage.value = 1
    }

    const refreshList = () => {
      ElMessage.success('待办列表已刷新')
    }

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    return {
      activeTab,
      dialogVisible,
      dialogTitle,
      currentPage,
      pageSize,
      totalTodos,
      filter,
      form,
      todos,
      filteredTodos,
      showAddDialog,
      editTodo,
      saveTodo,
      deleteTodo,
      toggleComplete,
      search,
      refreshList,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.todos-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-20 {
  margin-top: 20px;
}

.filter-controls {
  display: flex;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.completed-task {
  text-decoration: line-through;
  color: #999;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>